<template>
  <div>
    <a-card>
      <a-button type="primary" icon="plus" @click="add">新增</a-button>
    </a-card>
    <a-spin :spinning="totalspin">
      <a-table
        :columns="columns"
        :data-source="classifyList"
        :pagination="false"
        :rowKey="(record) => record.id"
      >
        <span slot="customTitle">分类id</span>
        <span slot="action">
          <a-button
            type="primary"
            style="margin-right:8px"
            icon="eye"
            @click="edit"
            >编辑</a-button
          >
          <a-button
            type="danger"
            style="margin-right:8px"
            icon="delete"
            @click="del"
            >删除</a-button
          >
        </span>
      </a-table>
    </a-spin>
    <!-- <a-modal
      centered
      title="删除博客"
      v-model="isDel"
      @ok="delOk"
      @cancel="cancel"
    >
      <p>确定删除这条博客吗？(此操作不可逆噢～)</p>
    </a-modal> -->
    <a-modal class="del-classify" title="删除分类" v-model="delModal">
      <p>确定删除此分类吗？(此操作不可逆噢～)</p>
      <template slot="footer">
        <a-button @click="cancel">
          取消
        </a-button>
        <a-button type="primary" @click="delOK">
          确认
        </a-button>
      </template>
    </a-modal>
    <a-modal class="add-classify" title="添加分类" v-model="addModal">
      <a-input placeholder="请输入需要新建的分类名称" v-model="addName" />
      <template slot="footer">
        <a-button @click="cancel">
          取消
        </a-button>
        <a-button type="primary" @click="confirmAdd">
          确认
        </a-button>
      </template>
    </a-modal>
    <a-modal class="edit-classify" title="修改分类名称" v-model="editModal">
      <a-input placeholder="请输入需要新建的分类名称" v-model="editName" />
      <template slot="footer">
        <a-button @click="cancel">
          取消
        </a-button>
        <a-button type="primary" @click="confirmEdit">
          确认
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment';
import { mapGetters } from 'vuex';
import {
  classifyListApi,
  addClassifyApi,
  delClassifyApi,
  editClassifyApi,
} from '@/services/blogApi/classify';
export default {
  data() {
    return {
      columns: [
        {
          title: '分类id',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '分类名称',
          dataIndex: 'classifyName',
          key: 'classifyName',
        },
        {
          title: '创建时间',
          dataIndex: 'createdAt',
          key: 'createdAt',
        },
        {
          title: '最近更新',
          dataIndex: 'updatedAt',
          key: 'updatedAt',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      //
      //
      currentId: 0,
      addName: '', //添加分类名称
      editName: '', //编辑分类的分类名
      delModal: false, //del classify
      addModal: false, //添加分类
      editModal: false, //修改分类
      classifyList: [], //分类列表
      totalspin: false, //数据未请求回来时，整页loading
    };
  },
  created() {
    this.getClassifyList();
  },
  computed: {
    ...mapGetters('account', ['user']),
  },
  methods: {
    //---获取分类列表-start---
    async getClassifyList() {
      let res = await classifyListApi({
        projectId: this.user.project_id,
      });
      this.classifyList = res.data.rows;
      this.classifyNum = res.data.count;
      this.classifyList.forEach((ele) => {
        ele.createdAt = moment(ele.createdAt).format('YYYY-MM-DD  HH:mm:ss');
        ele.updatedAt = moment(ele.updatedAt).format('YYYY-MM-DD  HH:mm:ss');
      });
      this.totalspin = false;
    },
    //---获取分类列表-end---
    //---添加分类-start---
    add() {
      this.addModal = true;
    },
    async confirmAdd() {
      await addClassifyApi({
        classifyName: this.addName,
        projectId: this.user.project_id,
      });
      this.getClassifyList();
      this.addModal = false;
      this.$message.success('添加成功', 1);
      this.addName = '';
    },
    cancel() {
      this.addModal = false;
      this.editModal = false;
      this.delModal = false;
    },
    //---添加分类-end---
    edit(e) {
      let tr = e.target.parentNode.parentNode.parentNode;
      this.currentId = tr.children[0].innerHTML;
      this.editName = tr.children[1].innerHTML;
      this.editModal = true;
    },
    async confirmEdit() {
      this.editModal = false;
      await editClassifyApi({
        id: this.currentId,
        projectId: this.user.project_id,
        classifyName: this.editName,
      });
      this.getClassifyList();
      this.$message.success('修改成功', 1);
    },
    del(e) {
      this.delModal = true;
      let tr = e.target.parentNode.parentNode.parentNode;
      this.currentId = tr.children[0].innerHTML;
    },
    async delOK() {
      this.delModal = false;
      await delClassifyApi({
        id: this.currentId,
        projectId: this.user.project_id,
      });
      this.getClassifyList();
      this.$message.success('成功删除', 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  .pageTab {
    text-align: right;
  }
  .del-list-btn {
    text-align: center;
  }
}
</style>
